<template>
<Card>
<span>姓名:</span>
      <Input v-model="queryCondition.customerName" placeholder="请输入" style="width: 200px"></Input>
      <span style="width: 200px;margin-left: 10px;">证件号码:</span>
      <Input v-model="queryCondition.idCardNo" placeholder="请输入" style="width: 200px"></Input>
      <Button type="primary" @click="initPage" style="margin-left: 10px;">查询</Button>
      <Button type="primary" @click="reset" style="margin-left: 10px;">重置</Button>
    </header>
    <Content style="margin-top:20px;">
      <Table border :columns="tableColumns" :data="tableDatas"></Table>
    </Content>
    <div style="text-align:center;width:50%;margin:100px auto;">
      <Page :total="queryCondition.totalPage" :current="queryCondition.currentPage" :page-size="queryCondition.pageSize" show-elevator show-total @on-change="handlePageChange"></Page>
    </div>
  </Card>
</template>
<script>
export default {

  data () {
    return {
      tableColumns: [
        {
          title: '客户姓名',
          key: 'custName'
        },
        {
          title: '证件号码',
          key: 'custIdCard'
        },
        {
          title: '产品',
          key: 'productName'
        }

      ]
    }
  },
  methods: {
    handlePageChange (goPage) {
      this.initPage(goPage)
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
  }
}
</script>
